<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<!--<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<title>Document</title>
		<style type="text/css">
			.talk_con {
				max-width: 600px;
				min-height: 500px;
				border: 1px solid #666;
				margin: 50px auto 0;
				background: #f9f9f9;
			}

			.talk_show {
				max-width: 580px;
				height: 420px;
				border: 1px solid #666;
				background: #fff;
				margin: 10px auto 0;
				overflow: auto;
				padding-bottom:50px;
			}

			.talk_input {
				display: flex;
				flex-flow: row nowrap;
				max-width: 580px;
				margin: 10px auto 0;
			}

			.whotalk {
				max-width: 80px;
				min-height: 30px;
				float: left;
				outline: none;
			}

			.talk_word {
				max-width: 510px;
				width: 100%;
				// min-height: 40px;
				padding: 0px;
				// border: 1px #111111 solid;
				float: left;
				outline: none;
				// text-indent: 10px;
			}

			.talk_sub {
				width: 56px;
				min-height: 30px;
				float: left;
				margin-left: 10px;
			}

			.atalk {
				margin: 15px 10px 0 10px;
				text-align: left;
			}

			.atalk span {
				display: inline-block;
				display: flex;
				word-break: break-all;
				text-align:left;
				flex-flow: row nowrap;
				background: #0181cc;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
				max-width: 20vw;

			}

			.atalk span p {
				margin-bottom: 0;
			}

			.btalk {
				margin: 15px 10px 0 10px;
				text-align: right;
			}

			.btalk span {
				display: inline-block;
				text-align:left;
				word-break: break-all;
				background: #ef8201;
				border-radius: 10px;
				color: #fff;
				padding: 5px 10px;
				max-width: 20vw;

			}

			.btalk span a {
				margin-bottom: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div>
				<div class="talk_con">
					<div class="talk_show" ref="words" id="words-id" v-html="words" />
					<div id="over-bottom"  style="height:10px; overflow:hidden"></div>
				</div>
				<div class="talk_input">
					<input type="text" class="talk_word" v-model="obj.account" placeholder="请输入发送内容"
						@keyup.enter="contentSubmitClick" />
					<button class="talk_word" style="width:70px;min-height: 40px;"
						@click="contentSubmitClick">发送</button>
				</div>
			</div>
		</div>
		</div>
		<script src="./vue.js"></script>
		<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data() {
					return {
						fwbShow: false,
						obj: {
							ipId: Math.random(),
							name: '',
							account: ""
						},
						words: "",
					}
				},
				computed: {

				},
				methods: {
					contentSubmitClick() {
						if (this.obj.account.length>50) {
							alert("超出长度限制", 1)
							return
							// message.error("超出长度限制", 1)
						}
						if (this.obj.account) {
							axios.post(`http://localhost:1111/getUser`, this.obj).then(res => {
								this.obj.account = ""
							})
						} else {
							alert("发送内容不能为空", 1)
							// message.error("发送内容不能为空", 1)
						}
					}
				},
				mounted() {
					var that = this
					var ws = new WebSocket('ws://localhost:1111');
					ws.onopen = function() {
						var str = '<div class="btalk"><span> ' + 'webScoket连接成功,可以开始聊天了' + '</span></div>';
						that.words = that.words + str;
					};
					ws.onmessage = function(e, data) {
						const reader = new FileReader();
						reader.readAsText(e.data, "UTF-8");
						reader.onload = (e) => {
							//字符串和json格式
							result = JSON.parse(reader.result);
							//result = JSON.stringify(reader.result);
							console.log('websocked收到', result);
							if (that.obj.ipId !== result.ipId) {
								var str = '<div class="atalk"><span>' + '对方' + ':' + result.account + '</span></div>';
							} else {
								var str = '<div class="btalk"><span> ' + '我方' + ':' + result.account + '</span></div>';
							}
							that.words = that.words + str;
							// 滑到滚动条底部
							var chatBox = document.getElementById('words-id');
							chatBox.scrollTop = chatBox.scrollHeight;
							// this.$nextTick(() => {
							//         let scrollElem = this.$refs.scrollDiv; // 对应ref的命名
							//         scrollElem.scrollTo({ top: 0, behavior: 'smooth' });
							//       });
						}

					};

				},
			})
		</script>
	</body>
</html>